<template>
<div>
  <el-form label-width="120px"  :model="formData"  :rules="formDataRules" ref="updataForm">

    <el-form-item label="姓名" prop="username">
      <el-input v-model="formData.username" style="width:50%"  />
    </el-form-item>

    <el-form-item label="学号" prop="studentId">
      <el-input  v-model="formData.studentId" style="width:50%"  />
    </el-form-item>

    <el-form-item label="手机号" prop="phonnnum">
      <el-input  v-model="formData.phonnnum" style="width:50%"   />
    </el-form-item>

    <el-form-item label="年龄" prop="age">
      <el-input v-model="formData.age"  style="width:50%" />
    </el-form-item>



    <el-form-item label="性别"  prop="gender">
      <el-select  v-model="formData.gender"  clearable style="width:50%" placeholder="请选择性别">

        <el-option
          v-for="item in options2"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="入会时间" prop="joinDate">
      <el-date-picker  v-model="formData.joinDate" style="width:50%" placeholder="请输入入会时间"></el-date-picker>
    </el-form-item>

    <el-form-item label="院系" prop="depart">
      <!--    <el-input   v-model="formData.depart"  style="width:50%" placeholder="请输入院系"></el-input>-->
      <el-cascader
        v-model="value"
        :options="options"
        :props="{ expandTrigger: 'hover',}"
        @change="handleChange"
></el-cascader>
    </el-form-item>


  </el-form>
  <template >
    <el-row type="flex" justify="center">
      <el-col :span="6">
        <el-button type="primary" size="large" @click="btnOk">更新个人信息</el-button>
      </el-col>
    </el-row>
  </template>


</div>
</template>

<script>
import options from "@/api/constant/options";
import {addusers, editusers,getusersByid} from '@/api/user'
import router from '@/router'



export default {
  props:{


  },


  data(){
    return{
      formData: {  //绑定的数据
        username: '',
        phonnnum: '',
        studentId: '',
        depart: '',
        specialty: '',
        joinDate: '',
        age: '',
        gender:''
      },
      formDataRules:{  //校验规则
        username: [{ required: true, message: '用户姓名不能为空', trigger: 'blur' },
          {min: 1, max: 4, message: '用户姓名为1-4位'}],

        phonnnum: [{ required: true, message: '手机号不能为空', trigger: 'blur' }, {
          pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur'
        }],
        studentId: [{ required: true, message: '学号不能为空', trigger: 'blur' }],
        depart: [{ required: true, message: '院系不能为空', trigger: 'blur' }],
        specialty: [{ required: true, message: '专业不能为空', trigger: 'blur' }],
        joinDate: [{ required: true, message: '加入时间不能为空', trigger: 'change' }],
        age: [{ required: true, message: '年龄不能为空', trigger: 'blur' }],
        gender: [{ required: true, message: '性别不能为空', trigger: 'blur' }],

      },
      value: [],// 选择器选中的数据
      options:options ,//级联选择器的选项 学院专业
      options2:[{
        value: '1',
        label: '男'
      },
        {
          value: '0',
          label: '女'
        }],
      userId: this.$route.params.id,



    }
  },
  created() {
  this.getusersByid()
    },

  methods:{

//级联选择器
    handleChange(value){
      this.formData.depart=value[0]
      this.formData.specialty=value[1]

    },
   async getusersByid(){
   const result=   await  getusersByid(this.userId)

    this.formData=result[0]
     if (result[0].gender===1){
       this.formData.gender='男'

     }
     else {
       this.formData.gender='女'

     }

    },
   async btnOk(){
      try {
        await this.$refs.updataForm.validate()
        // 调用更新接口

        console.log(this.formData)
        await editusers(this.userId,this.formData)
        // 告诉父组件更新数据
        // this.$parent 可以直接调用到父组件的实例 实际上就是父组件this
        // this.$emit
        this.$message.success('更新信息成功')
        this.$emit('addUsers')
        router.push('/users')

      } catch (error) {
        console.log(error)
      }

    }

  }
}
</script>

<style scoped>

</style>
